<template>
    <div class="container">
        <div class="lucky-wheel">
            <div class="lucky-title"></div>
            <div class="wheel-main">
                <div class="wheel-pointer-box">
                    <div class="wheel-pointer" @click="rotate_handle()"
                         :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
                </div>
                <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
                    <div class="prize-list">
                        <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                            <div class="prize-pic">
                                <img :src="item.icon">
                            </div>
                            <div class="prize-count" v-if="item.count">
                                {{item.count}}
                            </div>
                            <div class="prize-type">
                                {{item.name}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="main-bg"></div>
            <div class="bg-p"></div>
            <div class="content">
                <div class="lottery_ticket">今日免费抽奖次数： {{ daily_chance}}</div>
            </div>
            <div class="tip">
                <div class="tip-title">活动规则</div>
                <div class="tip-content">
                    <p> 1.每日签到后，即可获得一次幸运大转盘的机会，仅限当天有效，过期作废。 2.金币抽奖，每10个金豆可兑换一次大转盘机会。</p>
                    <p> 2.金币抽奖，每10个金豆可以兑换一次大转盘抽奖机会</p>
                    <p> 3.所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品</p>
                </div>
            </div>
        </div>
        <div class="toast" v-show="toast_control">
            <div class="toast-container">
                <img :src="toast_pictrue" class="toast-picture">
                <div class="close" @click="close_toast()"></div>
                <div class="toast-title">
                    {{toast_title}}
                </div>
                <div class="toast-btn">
                    <div class="toast-cancel" @click="close_toast">关闭</div>
                </div>
            </div>
        </div>
        <div class="toast-mask" v-show="toast_control"></div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      easejoy_bean: 0, //金豆
      lottery_ticket: 0, //抽奖次数
      prize_list: [
        {
          icon: require("../assets/images/bean_five.png"), // 奖品图片
          count: "??", // 奖品数量
          name: "金币", // 奖品名称
          isPrize: 1 // 该奖项是否为奖品
        },
        {
          icon: require("../assets/images/spirit_icon_1.png"),
          count: "??", // 奖品数量
          name: "宠物",
          isPrize: 1
        },
        {
          icon: require("../assets/images/bean_500.png"),
          count: "??", // 奖品数量
          name: "红色能量",
          isPrize: 1
        },
        {
          icon: require("../assets/images/bean_500.png"),
          count: "??", // 奖品数量
          name: "蓝色能量",
          isPrize: 1
        },
        {
          icon: require("../assets/images/bean_five.png"), // 奖品图片
          count: "??", // 奖品数量
          name: "金币",
          isPrize: 1
        },
        {
          icon: require("../assets/images/bean_500.png"),
          count: "??", // 奖品数量
          name: "钻石",
          isPrize: 1
        },
        {
          icon: require("../assets/images/bean_500.png"),
          count: "??", // 奖品数量
          name: "红色能量",
          isPrize: 1
        },
        {
          icon: require("../assets/images/give_up.png"),
          count: 0, // 奖品数量
          name: "未中奖",
          isPrize: 0
        }
      ], //奖品列表
      toast_control: false, //抽奖结果弹出框控制器
      hasPrize: false, //是否中奖
      start_rotating_degree: 0, //初始旋转角度
      rotate_angle: 0, //将要旋转的角度
      start_rotating_degree_pointer: 0, //指针初始旋转角度
      rotate_angle_pointer: 0, //指针将要旋转的度数
      rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
      rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      click_flag: true, //是否可以旋转抽奖
      i: 0, //测试使用,
      number: 0,
      randomNumber: 0,
      toast_title: "",
      daily_chance: 0,
      token: ""
    };
  },
  created() {
    this.token = window.localStorage.getItem("token");
    this.init_prize_list();
    this.getDailyChance();
  },
  computed: {
    toast_pictrue() {
      return this.hasPrize
        ? require("../assets/images/congratulation.png")
        : require("../assets/images/sorry.png");
    }
  },
  methods: {
    getDailyChance() {
      this.$http
        .get("http://api.rjveg.pw/api/user/dial?token=" + this.token)
        .then(res => {
          if (res.data.code == 200) {
            this.daily_chance = res.data.data.number;
          }
        });
    },
    init_prize_list(list) {},
    rotate_handle() {
      this.$http
        .get("http://api.rjveg.pw/api/user/useDial?token=" + this.token)
        .then(res => {
          let data = res.data;
          if (data.code == 200) {
            if (data.data) {
              this.number = data.data;
              this.msg = data.msg;
              this.rotating(this.number);
            } else {
              this.$vux.toast.show({
                text: data.msg,
                type: "warn",
                time: 1000
              });
            }
          }
        });
    },
    rotating(index) {
      if (!this.click_flag) return;
      var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
      var during_time = 5; // 默认为1s
      var random = Math.floor(Math.random() * 7);
      var result_index = index || random; // 最终要旋转到哪一块，对应prize_list的下标
      var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数
      var rand_circle = 6; // 附加多转几圈，2-3
      this.click_flag = false; // 旋转结束前，不允许再次触发
      if (type == 0) {
        // 转动盘子
        var rotate_angle =
          this.start_rotating_degree +
          rand_circle * 360 +
          result_angle[result_index] -
          this.start_rotating_degree % 360;
        this.start_rotating_degree = rotate_angle;
        this.rotate_angle = "rotate(" + rotate_angle + "deg)";
        // // //转动指针
        // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
        // this.start_rotating_degree_pointer =360*rand_circle;
        var that = this;
        // 旋转结束后，允许再次触发
        setTimeout(function() {
          that.click_flag = true;
          that.game_over(this.number);
        }, during_time * 1000 + 1500); // 延时，保证转盘转完
      } else {
        //
      }
    },
    game_over() {
      this.toast_control = true;
      this.hasPrize = this.prize_list[this.number].isPrize;
      this.toast_title = this.hasPrize ? this.msg : "未中奖";
    },
    //关闭弹窗
    close_toast() {
      this.toast_control = false;
    }
  }
};
</script>
<style scoped>
.container {
  width: 100%;
}

.lucky-wheel {
  width: 100%;
  height: 13rem;
  background: rgb(252, 207, 133) url("../assets/images/color_pillar.png")
    no-repeat center bottom;
  background-size: 100%;
  padding-top: 0.5625rem;
}

.lucky-title {
  width: 100%;
  height: 3.125rem;
  background: url("../assets/images/lucky_title.png") no-repeat center top;
  background-size: 100%;
}

.wheel-main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wheel-bg {
  width: 7.4375rem;
  height: 7.4375rem;
  background: url("../assets/images/draw_wheel.png") no-repeat center top;
  background-size: 100%;
  color: #fff;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  transition: transform 3s ease;
}

.wheel-pointer-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -60%);
  width: 2.3125rem;
  height: 2.3125rem;
}

.wheel-pointer {
  width: 2.3125rem;
  height: 2.3125rem;
  background: url("../assets/images/draw_btn.png") no-repeat center top;
  background-size: 100%;
  transform-origin: center 60%;
}

.wheel-bg div {
  text-align: center;
}

.prize-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.prize-list .prize-item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.prize-list .prize-item:first-child {
  top: -1.2rem;
  left: 1rem;
  transform: rotate(20deg);
}

.prize-list .prize-item:nth-child(2) {
  top: -0.9rem;
  left: 1.2rem;
  transform: rotate(67deg);
}

.prize-list .prize-item:nth-child(3) {
  top: -0.5rem;
  left: 1.2rem;
  transform: rotate(-250deg);
}

.prize-list .prize-item:nth-child(4) {
  top: -0.1rem;
  left: 0.8rem;
  transform: rotate(-210deg);
}

.prize-list .prize-item:nth-child(5) {
  top: -0.1rem;
  left: 0.5rem;
  transform: rotate(-160deg);
}

.prize-list .prize-item:nth-child(6) {
  top: -0.6rem;
  left: 0.3rem;
  transform: rotate(-111deg);
}

.prize-list .prize-item:nth-child(7) {
  top: -1rem;
  left: 0.3rem;
  transform: rotate(-69deg);
}

.prize-list .prize-item:nth-child(8) {
  top: -0.6rem;
  left: 0.6rem;
  transform: rotate(-20deg);
}

.prize-item {
  width: 5.875rem;
  height: 9rem;
}

.prize-pic img {
  width: 1.5rem;
  height: 1rem;
  margin-top: 1.5625rem;
}

.prize-count {
  font-size: 0.35rem;
}

.prize-type {
  font-size: 0.3rem;
}

.main {
  position: relative;
  width: 100%;
  min-height: 8rem;
  background: rgb(243, 109, 86);
  padding-bottom: 1.6875rem;
}

.main-bg {
  width: 100%;
  height: 6.5625rem;
  position: absolute;
  top: -3.4375rem;
  left: 0;
  background: url("../assets/images/luck_bg.png") no-repeat center top;
  background-size: 100%;
}

.bg-p {
  width: 100%;
  height: 0;
  background: rgb(252, 207, 133);
}

.content {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(243, 109, 86);
  text-align: center;
  width: 100%;
  height: 5.1875rem;
  font-size: 0.4rem;
  color: #ffeb39;
}

.tip {
  position: relative;
  margin: 0 auto;
  width: 9rem;
  border: 1px solid #fbc27f;
}

.tip-title {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.5rem;
  color: #fccc6e;
  background: rgb(243, 109, 86);
  padding: 0.3125rem 0.625rem;
}

.tip-content {
  padding: 1.5625rem 0.625rem;
  font-size: 0.4rem;
  color: #fff8c5;
  line-height: 1.5;
}

.toast-mask {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  width: 100%;
  height: 100%;
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20000;
  transform: translate(-50%, -50%);
  width: 7rem;
  background: #fff;
  border-radius: 0.3125rem;
  padding: 0.3125rem;
  background-color: rgb(252, 244, 224);
}

.toast-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px dotted #fccc6e;
}

.toast-picture {
  position: absolute;
  top: -4rem;
  left: -1.5rem;
  width: 10rem;
  height: 5rem;
}

.toast-pictrue-change {
  position: absolute;
  top: -1.5rem;
  left: -1.375rem;
  width: 17.5rem;
  height: 3.125rem;
}

.toast-title {
  padding: 2.8125rem 0;
  font-size: 0.4rem;
  color: #fc7939;
  text-align: center;
}

.toast-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9375rem;
}

.toast-btn div {
  background-image: -moz-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );

  background-image: -ms-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );
  background-image: -webkit-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );
  box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
  width: 4.6875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  text-align: center;
  line-height: 1.875rem;
  color: #fff;
}

.close {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  width: 1rem;
  height: 1rem;
  background: url("../assets/images/close_store.png") no-repeat center top;
  background-size: 100%;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-clear:after {
  content: "";
  display: block;
  clear: both;
}
</style>

